<template>
    <div class="app-container">
        <div class="optionBox clearfix">
            <el-form>
                <el-input
                    placeholder="请输入内容"
                    v-model.trim="categoryValue"
                    class="chooseInput"
                    clearable>
                    <el-select
                        v-model="inputCategory"
                        slot="prepend"
                        placeholder="请选择"
                        clearable>
                        <el-option
                            v-for="category in categoryAttr"
                            :label="category.label"
                            :value="category.value"
                            :key="category.value">
                        </el-option>
                    </el-select>
                </el-input>
                <label>交易时间</label>
                <el-date-picker
                    v-model="daterange"
                    type="datetimerange"
                    value-format="yyyyMMddHHmmss"
                    clearable
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    class="chooseDatePicker">
                </el-date-picker>
                <el-button
                    class="btn-size"
                    type="primary"
                    icon="el-icon-search"
                    title="搜索"
                    @click="queryMsg">
                </el-button>
            </el-form>
            <div class="fr clearfix buttonBox new-refrech">
                <el-button
                    class="btn-size fl"
                    type="primary"
                    title="操作历史"
                    @click="operationHistory">
                    操作历史
                </el-button>
                <el-button
                    class="btn-size fl"
                    icon="el-icon-refresh"
                    title="刷新"
                    @click="refresh">
                </el-button>
            </div>
        </div>
        <el-table
            :data="tableData"
            stripe
            class="table-out-border"
            v-loading="isLoading">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="清算日期">
                            <span>{{ props.row.checkDate|transformTimeF }}</span>
                        </el-form-item>
                        <el-form-item label="清算类型">
                            <span>代扣</span>
                        </el-form-item>
                        <el-form-item label="交易时间">
                            <span>{{ props.row.transTime|transformTimeF }}</span>
                        </el-form-item>
                        <el-form-item label="流水编号">
                            <span>{{ props.row.sendOrderId }}</span>
                        </el-form-item>
                        <el-form-item label="订单编号">
                            <span>{{ props.row.orderId }}</span>
                        </el-form-item>
                        <el-form-item label="子订单编号">
                            <span>{{ props.row.stageOrderId }}</span>
                        </el-form-item>
                        <el-form-item label="姓名">
                            <span>{{ props.row.custName }}</span>
                        </el-form-item>
                        <el-form-item label="卡号">
                            <span>{{ props.row.accountNo }}</span>
                        </el-form-item>
                        <el-form-item label="手机号">
                            <span>{{ props.row.mobile }}</span>
                        </el-form-item>
                        <el-form-item label="流水金额">
                            <span>{{ props.row.transAmt|moneyFormatter }}元</span>
                        </el-form-item>
                        <el-form-item label="差错说明">
                            <span>{{ props.row.transDesc }}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="clearType" label="清算类型" min-width="60">
                <template slot-scope="props">
                    代扣
                </template>
            </el-table-column>
            <el-table-column align="center" prop="transTime" label="交易时间" min-width="120">
                <template slot-scope="scope">{{scope.row.transTime|transformTimeF}}</template>
            </el-table-column>
            <el-table-column align="center" prop="sendOrderId" label="流水编号" min-width="115"> </el-table-column>
            <el-table-column align="center" prop="orderId" label="订单编号" min-width="115"> </el-table-column>
            <el-table-column align="center" prop="stageOrderId" label="子订单编号" min-width="115"> </el-table-column>
            <el-table-column align="center" prop="accountNo" label="卡号" min-width="130"> </el-table-column>
            <el-table-column align="center" prop="mobile" label="手机号" min-width="90"> </el-table-column>
            <el-table-column label="操作" align="center" min-width="80">
                <template slot-scope="scope">
                    <el-button type='text' @click="writeOff(scope.row)">核销</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pageBox fr clearfix">
            <el-pagination
                layout="total, sizes, prev, pager, next, jumper"
                :page-sizes="[10, 20, 30, 40]"
                :total="totalCount"
                :page-size="keywords.pageSize"
                :current-page="keywords.page"
                @size-change="handlePageSizeChange"
                @current-change="handlePageChange">
            </el-pagination>
        </div>
        <el-dialog :visible.sync="dialogVisible" :title="dialogTitle" @close="closeDialog"  width="500px">
            <el-form :model="dialogForm" status-icon ref="dialogForm" label-width="40px" class="demo-ruleForm">
                <el-form-item label="备注" prop="remarks">
                    <el-input
                        type="textarea"
                        :rows="8"
                        placeholder="请输入内容(200字内)"
                        clearable
                        resize="none"
                        v-model="dialogForm.remarks">
                    </el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
      <el-button @click="cancelButtonClick">取 消</el-button>
      <el-button type="primary" @click="confirmButtonClick">确 定</el-button>
    </span>
        </el-dialog>
    </div>
</template>
<script>
  import { clearNullAttr } from '@/api/common'
  import { queryDeductedList, modifyPaidList } from '@/api/errorManage'

  export default {
    data: function() {
      return {
        isLoading: false,
        tableData: null,
        totalCount: null, // 数据总条数
        inputCategory: null, // 下拉选择的查询属性
        categoryValue: null, // 下拉选择对应查询属性的值
        daterange: '',
        categoryAttr: [
          { label: '流水编号', value: 'sendOrderId' },
          { label: '订单编号', value: 'orderId' },
          { label: '子订单编号', value: 'stageOrderId' },
          { label: '卡号', value: 'accountNo' },
          { label: '手机号', value: 'mobile' }
        ],
        keywords: { // 查询参数
          page: 1,
          pageSize: 10,
          sendOrderId: null, // 流水编号
          orderId: null, // 订单编号
          stageOrderId: null, // 子订单编号
          accountNo: null, // 卡号
          mobile: null, // 手机号
          startTime: null, // 开始时间
          endTime: null // 结束时间
        },
        dialogVisible: false, // 对话框显示
        dialogTitle: '', // 对话框标题
        tempData: null,
        dialogForm: {
          remarks: ''
        }
      }
    },
    filters: {},
    computed: {},
    created: function() {
      this.fetchData()
    },
    methods: {
      fetchData() { // 查询未核销代扣列表数据
        this.isLoading = true
        if (this.daterange) {
          this.keywords.startTime = this.daterange[0]
          this.keywords.endTime = this.daterange[1]
        } else {
          this.keywords.startTime = null
          this.keywords.endTime = null
        }
        this.keywords[this.inputCategory] = this.categoryValue
        const uploadData = clearNullAttr(this.keywords)
        console.log('shq123', uploadData)
        queryDeductedList({}, uploadData).then(res => {
          console.log('list', res)
          if (res.code === '000000') {
            this.tableData = res.data.data
            this.totalCount = res.data.recordsTotal
            delete this.keywords[this.inputCategory]
            this.isLoading = false
          }
        }).catch(error => {
          this.isLoading = false
          console.log(error)
        })
      },
      queryMsg() { // 查询按钮点击
        this.keywords.page = 1
        this.fetchData()
      },
      refresh() { // 刷新按钮点击事件
        this.keywords.page = 1
        this.fetchData()
      },
      operationHistory() {
        console.log('操作历史')
        this.$router.push({
          path: '/bugDeal/deductedDeal'
        })
      },
      writeOff(row) {
        this.dialogTitle = '核销'
        this.tempData = row
        this.dialogVisible = true
      },
      closeDialog() {
        console.log('关闭了弹框')
        this.dialogForm.remarks = ''
      },
      cancelButtonClick() {
        console.log('点击了取消按钮')
        this.dialogVisible = false
      },
      confirmButtonClick() {
        console.log('点击了确定按钮', this.tempData.id)
        if (this.dialogTitle === '核销') {
          this.writeOffOperation()
        }
      },
      writeOffOperation() { // 核销操作
        const uploadData = {
          id: this.tempData.id,
          remark: this.dialogForm.remarks
        }
        modifyPaidList({}, uploadData).then(res => {
            console.log('核销', res)
            if (res.code === '000000') {
              this.dialogVisible = false
              this.$message({
                showClose: true,
                message: '核销成功',
                type: 'success'
              })
              this.refresh()
            }
        }).catch(error => {
            console.log(error)
            this.dialogVisible = false
        })
      },
      handlePageChange(page) { // 页面跳转事件
        this.keywords.page = page
        this.fetchData()
      },
      handlePageSizeChange(pageSize) { // 表格一页显示的数据数目 改变事件
        this.keywords.pageSize = pageSize
        this.fetchData()
      }
    }
  }
</script>
<style lang="scss" scoped>
    /* type="text/scss" */
    .optionBox {
        label{
            margin-right: 10px;
        }
        form {
            .chooseInput {
                width: 330px;
                margin-right: 10px;
                vertical-align: middle;
                .el-select {
                    min-width: 110px;
                }
            }
            .chooseDatePicker{
                width: 380px;
                margin-right: 10px;
            }
            label{
                margin-bottom: 0;
            }
            *{
                vertical-align: middle;
            }
        }
    }
</style>
<style lang="scss">
    .demo-table-expand {
        font-size: 0;
        label {
            width: 90px;
            color: #99a9bf;
        }
        .el-form-item {
            margin-right: 0;
            margin-bottom: 0;
            width: 50%;
        }
    }
    .el-table__expanded-cell[class*=cell]{
        padding: 20px 50px;
    }
</style>
